<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>博客详情</title>
    <link rel="stylesheet" href="../static/css/typo.css">
    <link rel="stylesheet" href="../static/css/me.css">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css">
    <link
            rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
</head>
<body>
<!--导航-->
<nav th:replace="_fragments :: menu(1)" class="ui  inverted attached segment m-padded-tb-mini m-shadow-small" >
    <div class="ui container">
        <div class="ui stackable inverted secondary  menu ">
            <h2 class="ui teal header item animate__animated animate__swing">Blog</h2>
            <a href="#" class="m-item m-mobile-hide item"><i class="home icon"></i>首页</a>
            <a href="#" class="m-item m-mobile-hide item"><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item m-mobile-hide item"><i class="tags icon"></i>标签</a>
            <a href="#" class="m-item m-mobile-hide item"><i class="clone icon"></i>归档</a>
            <a href="#" class="m-item m-mobile-hide item"><i class="info icon"></i>关于我</a>
            <div class="right m-item m-mobile-hide item">
                <div class="ui icon inverted transparent input">
                    <input type="text" placeholder="search">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle black icon button m-top-right  m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>



<!--中间内容-->
<div id="waypoint" class="m-container-small m-padded-tb-big">
    <div class="ui container">
        <div class="ui top attached segment">
            <div class="ui  horizontal link list">
                <div class="item">
                    <img src="../static/images/yello.jpg" th:src="@{${blog.user.avatar}}" alt="" class="ui avatar image">
                    <div class="content"><a href="#" class="header" th:text="${blog.user.nickName}">Mr.Li </a></div>
                </div>
                <div class="item">
                    <i class="calendar icon"></i> <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-01-01</span>
                </div>
                <div class="item">
                    <i class="eye icon"></i> <span th:text="${blog.views}">2344</span>
                </div>
            </div>
        </div>
        <div class="ui attached segment">
            <!--            图片区域-->
            <img src="https://unsplash.it/800/450?image=1005" class="ui fluid rounded image" th:src="@{${blog.firstPicture}}">
        </div>
        <div class="ui  attached padded segment  typo typo-selection">
            <!--            内容-->
            <div class="ui right aligned segment  basic">
                <label class="ui orange basic label" th:text="${blog.flag}">原创</label>
            </div>
            <h2 id="title" class="ui center aligned header" th:text="${blog.title}">
                关于刻意练习清单
            </h2>
            <br>
            <div id="content" class="m-padded-lr-reponsive m-padded-tb-large js-toc-content" th:utext="${blog.content}">
<!--                <h4 id="mcontent">1. 不论在什么行业或领域</h4>-->
<!--                提高技能与能力的最有效方法全都遵循一系列普遍原则，就是刻意练习。成为任何领域高手的关键因素不是文化，不是艺术，不是哲学，不是制度，不是自虐，而是刻意练习。<br></p>-->
<!--                <p>2. 关于刻意练习，被误读最久的一个概念是“一万小时定律”。事实上，想把自己变成高手，光知道“一万小时”毫无意义，因为真正的关键根本不在训练时间，而是训练的方法。</p>-->
<!--                <p>3. 功夫就在功夫上，“功夫在诗外”就是一句谎言。技能是人脑中的一种硬件结构，是“长”在人脑中的。要高度针对性地重复练习基本功，想要学什么功夫，就应该练什么功夫。</p>-->
<!--                <p>4. 心理学家把人的知识和技能分为层层嵌套的三个圆形区域：最内一层是“舒适区”，是我们已经熟练掌握的各种技能；最外一层是“恐慌区”，是我们暂时无法学会的技能；二者中间则是“学习区”。</p>-->
<!--                <p>5. 在“舒适区”做事，叫生活；在“学习区”做事，才叫练习。有效的练习必须发生在“学习区”，一旦你学会了某个东西，就不该在上面继续花时间，要立即转入下一个难度。凡是达到“我闭着眼睛都能……”这个程度的人都废了，高手不会闭着眼睛做事。</p>-->
<!--                <p>6. 只有结果可控的领域，刻意练习才有用。股市是不可控的，所以刻意练习预测股市很可能就没用。有严格固定规则的领域，练习的作用最大，比如国际象棋；没有严格规则的领域，练习的作用则非常有限，如编程、航空飞行、广告创意。</p>-->
<!--                <p>7. 把要训练的内容分成有针对性的小块，对每一个小块进行重复练习。艺术家要采风，棋手要打谱，律师要学案例，政客要读历史，科学家要看论文。宁可定期坚持发几篇灌水小文章，也比苦读10年期待一鸣惊人强。</p>-->
<!--                <p>8. 刻意练习的关键是随时获得有效的反馈。你需要一个旁观者，他不见得水平比你高，不需要经常跟你谈心，不用激发你的战斗热情，但他必须给你提供三步反馈：演示一遍正确动作，表现一遍错误动作，再演示一遍正确动作。</p>-->
<!--                <p>9. 有效的反馈，应该满足三个条件： 及时，一旦不对马上就有人给你指出来；超脱，对事不对人，反馈者不把你的错误上升到“你这个人行不行”的层面；试错，你犯错误的代价很小。</p>-->
<!--                <p>10. 考试是最好的反馈。熟悉并不等于理解，想要真正理解，唯一的办法是考试和测验。没有经过测验，你的知识只是幻觉。</p>-->
<!--                <p>11. 学习时间长不等于用功，决定性因素不是学习时间，而是学习环境。刻意练习不好玩，如果你在打打闹闹中享受练习的过程，那就不是刻意练习。你必须在一个不受打扰的环境中单独学习，调动大量的身体和精神资源，全力投入。特别专注地干一件事才是最酷的。</p>-->
<!--                <p>12. 刻意练习最为关键的一点，是敢于迈出从舒适区往外走的那一步。你不但应该在“学习区”刻意练习，你的研究、工作和娱乐都应该在“学习区”。刻意练习可以使几乎任何人在大多数领域成为高手，如果能更早知道这一点，你在奋斗路上也许可以节省更多时间和精力。</p>-->
            </div>
            <!--                标签-->
<!--            <div class="m-padded-lr-tiny ui" th:each="tag : ${blog.tags}">-->
<!--                <div class="ui label teal left pointing basic" th:text="${tag.name}">-->
<!--                    方法论-->
<!--                </div>-->
<!--            </div>-->

            <div class="ui basic segment">
                <a  href="#" target="_blank" class="ui teal basic left pointing label m-margin-tb-tiny" th:each="tag : ${blog.tags}">
                    <span th:text="${tag.name}"></span>
                </a>
            </div>
            <!--            赞赏-->

            <div class="ui center aligned basic segment" th:if="${blog.appreciation}">
                <button id="payButton" class="ui circular orange basic button">
                    赞赏
                </button>
            </div>
            <div class="ui payQ flowing popup  transition hidden">
                <div class="ui orange basic label">
                    <div class="ui images" style="font-size: inherit">
                        <div class="ui image">
                            <img src="../static/images/wei.PNG" th:src="@{/images/pay.png}" alt="" class="ui rounded bordered image" style="width: 120px">
                            <div>支付宝</div>
                        </div>
                        <div class="ui image">
                            <img src="../static/images/wei.PNG" th:src="@{/images/pay.png}" alt="" class="ui rounded bordered image" style="width: 120px">
                            <div>微信</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui attached positive message">
            <!--            博客信息-->
            <div class="ui middle aligned grid">
                <div class="eleven wide column">
                    <ui>
                        <li><span th:text="${blog.user.nickName}">作者:杰克托弗诺夫斯基</span></li>
                        <li>发表时间: <span th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-10-10</span></li>
                        <li>版权声明: <span th:text="|${blog.flag} - 非商用|">-非商用</span></li>
                        <li th:if="${blog.flag}=='原创'"><span th:text="原创作品">公众号转载</span></li>
                        <li th:if="${blog.flag}=='转载'"><span >公众号转载</span></li>
                        <li th:if="${blog.flag}=='原创'"><span th:text="中外翻译作品">公众号转载</span></li>
                    </ui>
                </div>
                <div class="five wide column m-padded-mini">
                    <img src="../static/images/wechat.jpg" alt="" th:src="@{/images/wechat.jpg}" class="ui right floated bottom attached segment" style="width: 130px">
                </div>
            </div>
        </div>
        <div class="ui bottom attached segment" th:if="${blog.commentable}">
            <!--            留言区域-->
            <div id="comment-container" class="ui teal segment">

                <div th:fragment="commentList">
                <div class="ui threaded comments"  style="max-width: 100%!important;">
                    <h3 class="ui dividing header">评论</h3>
                    <div class="comment" th:each=" comment:${comments}">
                        <a class="avatar">
                            <img src="../static/images/yello.jpg">
                        </a>
                        <div class="content">
                            <a class="author">
                                <span  th:text="${comment.nickname}">Matt</span>
                                <div class="ui mini basic teal left pointing label m-padded-mini" th:if="${comment.adminComment}">博主</div>
                            </a>
                            <div class="metadata">
                                <span class="date" th:text="${#dates.format(comment.createTime,'yyyy-MM-dd')}">今天下午 5:42</span>
                            </div>
                            <div class="text" th:text="${comment.content}">太赞了！ </div>
                            <div class="actions">
                                <a class="reply" data-commentid="1" th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}" data-commentnickname="Matt"  onclick="reply(this)">回复</a>
                            </div>
                           </div>
                        <div class="comments" th:if="${#arrays.length(comment.replyComments)}">
                            <div class="comment" th:each=" reply:${comment.replyComments}">
                                <a class="avatar">
                                    <img src="../static/images/yello.jpg">
                                </a>
                                <div class="content">
                                    <a class="author">
                                        <span th:text="${reply.nickname}"></span><div class="ui mini basic teal left pointing label m-padded-mini" th:if="${reply.adminComment}">博主</div> <span class="m-teal">@</span><span th:text="${reply.parentComment.nickname}" class="m-teal"></span><div class="ui mini basic teal left pointing label m-padded-mini" th:if="${reply.parentComment.adminComment}">博主</div>
                                    </a>
                                    <div class="metadata">
                                        <span class="date" th:text="${#dates.format(reply.createTime,'yyyy-MM-dd')}">今天下午 5:42</span>
                                    </div>
                                    <div class="text" th:text="${reply.content}">太赞了！ </div>
                                    <div class="actions">
                                        <a class="reply" data-commentid="1" th:attr="data-commentid=${reply.id},data-commentnickname=${reply.nickname}" data-commentnickname="Matt"  onclick="reply(this)">回复</a>
                                    </div>
                                </div>
                            </div>
                           </div>
                        </div>
                    </div>
                </div>


            </div>
            <div id="replyForm" class="ui form">
                <input type="hidden" name="blog.id" th:value="${blog.id}">
                <input type="hidden" name="parentComment.id" value="-1">
                <div class="field ">
                    <textarea name="content" placeholder="请输入文本信息..."></textarea>
                </div>
                <div class="fields">
                    <div class="field m-mobile-wide m-margin-button-small">
                        <div class="ui left icon input">
                            <i class=" user icon"></i>
                            <input type="text" name="nickname" placeholder="姓名" th:value="${session.user}!=null ? ${session.user.nickName}">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-button-small">
                        <div class="ui  left icon input">
                            <i class="mail icon"></i>
                            <input type="email" name="email" placeholder="邮箱" th:value="${session.user}!=null ? ${session.user.email}">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-button-small">
                        <button id="commentpost-btn" type="button" class="ui teal m-mobile-wide button">
                            <i class="edit icon"></i>
                            发布
                        </button>
                    </div>
                </div>
                <div class="ui error message"></div>
        </div>

        </div>
    </div>
</div>

<div id="toolbar" class="m-padded m-fixed m-right-buttom animate__animated animate__rubberBand" style="display: none">
  <div class="ui vertical icon buttons">
      <button id="catalog" type="button" class="ui teal button">目录</button>
      <div class="ui catalog flowing popup transition hidden" style="width: 250px">
             <ol class="js-toc">

             </ol>
      </div>
      <a href="#comment-container" type="button" class="ui teal button">留言</a>
      <button type="button"  class="ui wechat icon button"><i class="weixin icon"></i></button>

      <div id="qrcode" class="ui wechatQR flowing popup transition hidden m-padding-mini" style="width: 120px">
<!--          <img src="./static/images/wechat.jpg" alt="" class="ui rounded image" style="width: 120px">-->
      </div>

      <div id="toTop-button" class="ui icon button"><i class="chevron up icon"></i></div>

  </div>
</div>
<br>
<br>
<!--底部footer-->
<footer th:replace="_fragments :: footer"></footer>

<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="../static/lib/qrcode/qrcode.js"></script>
<script src="../static/lib/tocbot/tocbot.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js"></script>
<!--/*/</th:block>/*/-->

<script th:inline="javascript">
    $('.ui.form').form({
        fields:{
            content:{
                identifier:'content',
                rules:[{
                    type: 'empty',
                    prompt:'评论不能为空'
                }]
            },
            nickname:{
                identifier:'nickname',
                rules:[{
                    type: 'empty',
                    prompt:'昵称不能为空'
                }]
            },
            email:{
                identifier:'email',
                rules:[{
                    type: 'empty',
                    prompt:'邮箱不能为空'
                }]
            }
        }
    });
    $(function (){
        $("#comment-container").load(/*[[@{/comments/{id}(id=${blog.id})}]]*/"");
    });
    //表单验证
    $("#commentpost-btn").click(function (){
        var boo=$('.ui.form').form('validate.form');
        if(boo){
            postData();
        }else {
            console.log("校验失败");
        }
    });
    //提交表单的方法
    function postData(){
        $("#comment-container").load(/*[[@{/comments}]]*/"",{
            "blog.id":$("[name='blog.id']").val(),
            "parentComment.id":$("[name='parentComment.id']").val(),
            "content":$("[name='content']").val(),
            "nickname":$("[name='nickname']").val(),
            "email":$("[name='email']").val()
        },function (responseTxt,statusTxt,xhr){
            clearContent();
        });
    }
    //提交评论成功后清理需要清空的值
    function clearContent(){
        $("[name='content']").val('');
        $("[name='parentComment.id']").val(-1);
        $("[name='content']").attr("placeholder","请输入评论信息...");
    }

    //回复评论的方法
    function reply(obj){
        var commentId=$(obj).data('commentid');
        var commentnickname= $(obj).data('commentnickname');
        $("[name='content']").attr("placeholder","@"+commentnickname).focus();
        $("[name='parentComment.id']").val(commentId);
        $(window).scrollTo($('#replyForm'),500);
    }
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hide');
    });
    $('#payButton').popup({
        popup:$('.payQ.popup'),
        on : 'click',
        position:'bottom center'
    });
    //标题列表生成插件
    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
    });
    $('#catalog').popup({
        popup:$('.ui.catalog'),
        on : 'click',
        position:'left center'
    });
    $('.ui.weixin').popup({
        popup:$('.weixinQR'),
        on:'click',
        position:'left center'
    });
    $('.wechat').popup({
        popup:$('.wechatQR'),
        on:'hover',
        position:'left center'
    });
    var url= /*[[@{/blogs/{id}(id=${blog.id})}]]*/"";
    var adress='120.55.192.15:8080';
    var qrcode = new QRCode("qrcode", {
        text: adress+url,
        width: 110,
        height: 110,
        colorDark : "#000000",
        colorLight : "#ffffff",
        correctLevel : QRCode.CorrectLevel.H
    });
    $('#toTop-button').click(function () {
        $(window).scrollTo(0,500);
    });
    var waypoint = new Waypoint({
        element: document.getElementById('waypoint'),
        handler: function(direction) {
            if(direction == 'down'){
                $('#toolbar').show();
            }else {
                $('#toolbar').hide(500);
            }
            console.log('Scrolled to waypoint!'+direction)
        }
    });
</script>
</body>
</html>